<template>
  <div>
    <s-breadcrumb></s-breadcrumb>
    <el-card>
      <el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert>
      <el-steps :space="200" :active="active_index-0" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="是否多规格"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="详细参数"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <el-form label-position="top" :model="info" :rules="add_rules"  ref="add_ref">
        <el-tabs :tab-position="'left'" v-model="active_index" :before-leave="beforeLeave">
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="商品分类" prop="product_type_id">
              <el-cascader placeholder="请选择商品分类"
                v-model="info.product_type_id_arr"
                :options="product_type_list"
                :props="{ expandTrigger: 'hover' ,value:'id',label:'title'}"
                @change="add_handle_change" clearable>
              </el-cascader>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
              <el-input placeholder="请输入商品名称" maxlength="30" clearable show-word-limit v-model="info.name"></el-input>
            </el-form-item>
            <el-form-item label="商品描述" prop="describe">
              <el-input placeholder="请输入商品描述" maxlength="100" clearable show-word-limit type="textarea" :rows="3" v-model="info.describe"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="image_id">
              <s-file-image :url="info.image_url" @confirm_imsge="add_confirm_image"></s-file-image>
            </el-form-item>
            <el-form-item label="轮播图">
              <s-file-image-all :image_list="info.images_arr" @confirm_imsge="add_confirm_image_all"></s-file-image-all>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input type="number" placeholder="请输入排序" maxlength="10" clearable show-word-limit v-model="info.sort"></el-input>
            </el-form-item>
          </el-tab-pane>
           <el-tab-pane label="是否多规格" name="1">
            <el-form-item label="是否多规格" prop="specs_status">
              <el-radio-group v-model="info.specs_status"  size="medium">
                <el-radio disabled border :label="0">否</el-radio>
                <el-radio disabled border :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="2">
            <div v-if="info.specs_status===1&&info.attrbute_key_list.length>0">
              <el-form-item v-for="item in info.attrbute_key_list" :key="item.id" :label="item.name">
                  <el-checkbox border v-for="i in item.sub" :key="i.id" :label="i.name" checked disabled></el-checkbox>
              </el-form-item>
            </div>

            <div v-else>暂无属性</div>
          </el-tab-pane>
          <el-tab-pane label="详细参数" name="3">
            <table v-if="info.specs_status===1">
              <thead>
                <tr>
                  <th v-for="(item,index) in info.attrbute_key_list" :key="index">{{item.name}}</th>
                  <th>产品售价</th>
                  <th>产品市场价</th>
                  <th>产品成本价</th>
                  <th>邮费</th>
                  <th>库存</th>
                  <th>销量</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in info.product_spec_to" :key="index">
                  <td v-for="(i,ind) in item.specs" :key="ind">
                    {{i.name}}
                  </td>
                  <td>
                    <el-input maxlength="10" v-model="item.money" clearable show-word-limit></el-input>
                  </td>
                  <td>
                    <el-input maxlength="10" v-model="item.bazaar_money" clearable show-word-limit></el-input>
                  </td>
                  <td>
                    <el-input maxlength="10" v-model="item.cost_money" clearable show-word-limit></el-input>
                  </td>
                  <td>
                    <el-input maxlength="10" v-model="item.postage" clearable show-word-limit></el-input>
                  </td>
                  <td>
                    <el-input maxlength="10" v-model="item.stock" clearable show-word-limit></el-input>
                  </td>
                  <td>
                  <el-input maxlength="10" v-model="item.sales" clearable show-word-limit></el-input>
                  </td>
                </tr>
              </tbody>
            </table>
            <div v-else>
              <el-form-item label="产品售价">
                <el-input placeholder="请输入产品售价" maxlength="10" clearable show-word-limit v-model="form_d.money"></el-input>
              </el-form-item>
              <el-form-item label="产品市场价">
                <el-input placeholder="请输入产品市场价" maxlength="10" clearable show-word-limit v-model="form_d.bazaar_money"></el-input>
              </el-form-item>
              <el-form-item label="产品成本价">
                <el-input placeholder="请输入产品成本价" maxlength="10" clearable show-word-limit v-model="form_d.cost_money"></el-input>
              </el-form-item>
              <el-form-item label="邮费">
                <el-input placeholder="请输入邮费" maxlength="10" clearable show-word-limit v-model="form_d.postage"></el-input>
              </el-form-item>
              <el-form-item label="销量">
                <el-input placeholder="请输入销量" maxlength="10" clearable show-word-limit v-model="form_d.sales"></el-input>
              </el-form-item>
              <el-form-item label="库存">
                <el-input placeholder="请输入库存" maxlength="10" clearable show-word-limit v-model="form_d.stock"></el-input>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="4">
            <el-form-item label="商品内容">
              <s-editor :content="info.content" @confirm_content="confirm_content"></s-editor>
            </el-form-item>
            <el-button class="send_btn" :disabled="update_btn" type="primary" @click="edit()">确 定</el-button>
          </el-tab-pane>
        </el-tabs>
       </el-form>
    </el-card>
  </div>
</template>

<script>
import sFileImage from '../../../../components/s-file-image/s-file-image.vue'
import sFileImageAll from '../../../../components/s-file-image-all/s-file-image-all.vue'
import sEditor from '../../../../components/s-editor/s-editor.vue'
export default {
  components: {
    's-file-image': sFileImage,
    's-file-image-all': sFileImageAll,
    's-editor': sEditor
  },
  data () {
    var checkSort = (rule, value, callback) => {
      // 定义正则表达式
      const regSort = /^[1-9]{1}[0-9]{0,10}$/
      if (regSort.test(value)) {
        return callback()
      }
      callback(new Error('请输入排序（大于0的数字）!'))
    }
    return {
      active_index: '0',
      id: this.$route.query.id, // 商品id
      update_btn: this.is_string('shop/product/update'), // 添加按钮是否禁用
      info: {},
      form_d: {},
      product_type_list: [], // 商品分类数据
      add_rules: {
        product_type_id: [
          { required: true, message: '请选择商品分类！', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入商品名称！', trigger: 'blur' },
          { min: 2, max: 20, message: '商品名称长度在2到20个字符', trigger: 'blur' }
        ],
        describe: [
          { required: true, message: '请输入商品描述！', trigger: 'blur' },
          { min: 2, max: 100, message: '商品描述长度在2到100个字符', trigger: 'blur' }
        ],
        image_id: [
          { required: true, message: '请选择图片！', trigger: 'blur' }
        ],
        specs_status: [
          { required: true, message: '请选择是否多规格！', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序！', trigger: 'blur' },
          { validator: checkSort, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.get_product_type_list(() => {
      this.get_edit()
    })
  },
  methods: {
    // 商品分类
    get_product_type_list (callBack) {
      this.$base.request({
        that: this,
        url: 'shop/product/product_type_list'
      }, (res) => {
        if (res.code === 8888) {
          this.product_type_list = res.data
          callBack && callBack()
        }
      })
    },
    // 编辑页面数据
    get_edit (callBack) {
      this.$base.request({
        that: this,
        url: 'shop/product/edit',
        data: { id: this.id }
      }, (res) => {
        if (res.code === 8888) {
          this.info = res.data
          this.form_d = res.data.product_spec_to[0]
          callBack && callBack()
        }
      })
    },
    // 确定
    edit () {
      this.$refs.add_ref.validate(valid => {
        if (valid) {
          if (this.info.specs_status === 0) {
            this.info.product_spec_to[0] = this.form_d
          }
          this.$base.request({
            that: this,
            method: 'PUT',
            url: 'shop/product/update',
            data: this.info
          }, (res) => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg })
              this.$router.push('/shop/product/index')
            }
          })
        }
      })
    },
    // 编辑器回调
    confirm_content (res) {
      this.info.content = res
    },
    // 切换选项卡触发
    beforeLeave (activeName, oldActiveName) {
      this.$refs.add_ref.validate(valid => {
      })
      if (oldActiveName === '0' && this.info.product_type_id_arr.length === 0) {
        return false
      }
    },

    // 添加图片回调
    add_confirm_image (res) {
      this.info.image_id = res.image_id
    },
    // 添加多图回调
    add_confirm_image_all (res) {
      if (res.length > 0) {
        const imageArr = []
        for (var i = 0; i < res.length; i++) {
          imageArr.push(res[i].id)
        }
        this.info.images = imageArr.join('|')
      } else {
        this.info.images = ''
      }
    },
    // 添加获取选择器值
    add_handle_change () {
      if (this.value.length > 0) {
        this.info.product_type_id = this.info.product_type_id_arr[this.info.product_type_id_arr.length - 1]
      } else {
        this.add_form.product_type_id = ''
        this.info.product_type_id_arr = []
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import 'edit.less';
</style>
